<template>
    <div id="lineChart2" style="width: 100%; height: 100%; position: relative; z-index: 9;"></div>
</template>
<script>
import * as echarts from "echarts";
let timer = null;
export default {
    name: 'PerformanceTrend2',
    data() {
        return {
            xAxisData: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-04', '2024-05'],
            yAxisData: [150, 230, 224, 218, 135, 147],
            flag: true
        }
    },
    mounted() {
        this.initChart();
        timer = setInterval(() => {
            if (this.flag) {
                this.yAxisData = [120, 200, 150, 80, 70, 135];
                this.flag = false;
            } else {
                this.yAxisData = [150, 230, 224, 218, 135, 200]
                this.flag = true;
            }
            this.initChart();
        }, 2500);
    },
    beforeDestroy() {
        clearInterval(timer);
    },
    methods: {
        initChart() {
            let dom = document.getElementById('lineChart2');
            let chart = echarts.init(dom, 'chalk')
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '5%',
                    left: '5%',
                    right: '8%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis: {
                    boundaryGap: [0, '30%'],
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        name: '共享量',
                        type: 'line',
                        data: this.yAxisData,
                        lineStyle: {
                            color: "#fff",
                            normal: {
                                width: 2,
                                color: "#0293B0", //设置实线的颜色
                            },
                        },
                        smooth: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    color: '#fff'
                                }
                            }
                        },
                        areaStyle: {//区域样式
                            origin: "start",//向最小值方向渐变，y轴有负值要写
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(22,105,168,1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(22,105,168,0.2)",
                                },
                            ]),
                        },
                    }
                ],

            };
            chart.setOption(option)
            // 监听屏幕变化自动缩放图表
            let observer = new ResizeObserver(function () {
                chart.resize();
            });
            observer.observe(dom)
        }
    }
}
</script>
